<template>
    <div class="app-container">
        <div class="search-div">
            <el-form :model="queryParams" label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级">
                            <el-select v-model="queryParams.gradeId">
                                <el-option v-for="item in gradeList" :key="item.id" :label="item.gradeName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级">
                            <el-select v-model="queryParams.classId">
                                <el-option v-for="item in classList" :key="item.id" :value="item.id"
                                    :label="item.className"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="学生姓名">
            </el-table-column>
            <el-table-column prop="gradeName" label="年级">
            </el-table-column>
            <el-table-column prop="className" label="班级">
            </el-table-column>
            <el-table-column prop="score" label="考试成绩">
                <template slot-scope="{row}">
                    <el-input-number v-model="row.score" controls-position="right" :min="0" :max="200"></el-input-number>

                </template>
            </el-table-column>
        </el-table>
        <div class="bottom-option">
            <el-button type="primary" @click="handleSave('save')">保 存</el-button>
            <el-button type="primary" @click="handleSave('tempSave')">暂 存</el-button>
        </div>
        <el-dialog title="保存" :visible.sync="open">
            <el-form ref="saveForm" :model="saveForm" label-width="80px" :rules="rules">
                <el-form-item v-if="mode == 'tempSave'" label="暂存记录名称" prop="recordName">
                    <el-input v-model="saveForm.recordName" />
                </el-form-item>
                <el-form-item label="考试年度" prop="examTime">
                    <el-date-picker v-model="saveForm.examTime" type="year" placeholder="选择年" value-format="yyyy">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="考试类型" prop="examType">
                    <el-select v-model="saveForm.examType">
                        <el-option v-for="item in examTypeDict" :key="item.dictValue" :value="item.dictValue"
                            :label="item.dictLabel"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试课程" prop="courseId">
                    <el-select v-model="saveForm.courseId">
                        <el-option v-for="item in courseList" :key="item.id" :value="item.id"
                            :label="item.courseName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submit" size="small">保存</el-button>
                <el-button @click="open = false" size="small">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import gradeApi from "@/api/grade";
import classApi from '@/api/class'
import studentApi from "@/api/student";
import scoreApi from "@/api/score";
import courseApi from "@/api/course";
import scoreRecordApi from "@/api/scoreRecord";
import {examTypeDict} from "@/const";
export default {
    name: "score-input",
    data() {
        return {
            open: false,
            tableData: [],
            queryParams: {
                gradeId: "",
                classId: ""
            },
            gradeList: [],
            classList: [],
            examTypeDict,
            scoreObj: {},
            saveForm: {

            },
            courseList: [],
            rules: {
                examTime: [{ required: true, trigger: 'blur', message: "请输入" }],
                examType: [{ required: true, trigger: 'blur', message: "请输入" }],
                courseId: [{ required: true, trigger: 'blur', message: "请输入" }],
            },
            mode: "save"
        }
    },
    watch: {
        'queryParams.gradeId': {
            handler: function (newVal) {
                classApi.getClassByGradeId(newVal).then(res => {
                    console.log("Res", res);
                    this.classList = res.data;
                })
            }
        }
    },
    mounted() {
        courseApi.list().then(res => {
            if (res.code == 200) {
                this.courseList = res.data;
            }
        })
        gradeApi.list().then(res => {
            if (res.code == 200) {
                this.gradeList = res.data;
            }
        })
    },
    methods: {
        handleTempSave() {

        },
        submit() {
            this.$refs.saveForm.validate((valid) => {
                if (valid) {
                    const { courseId, examTime, examType, recordName } = this.saveForm;
                    const courseObj = this.courseList.find(item => item.id == courseId);
                    let courseName = courseObj ? courseObj.courseName : "";
                    const requestParams = this.tableData.map(item => {
                        return {
                            score: item.score || 0,
                            studentName: item.name,
                            studentId: item.id,
                            courseId,
                            courseName,
                            examTime,
                            examType
                        }

                    })
                    if (this.mode == 'save') {
                        scoreApi.save(requestParams).then(res => {
                            console.log("saveRes", res);
                            if (res.code == 200) {
                                this.$message.success("录入成功")
                                this.open = false;
                                this.fetchData();
                            } else {
                                this.$message.success("录入失败")
                            }
                        })
                    } else if (this.mode == 'tempSave') {
                        scoreRecordApi.save({
                            recordName,
                            examType,
                            examTime,
                            courseId,
                            courseName,
                            scoreList:requestParams
                        }).then(res=>{
                            if (res.code == 200) {
                                this.$message.success("暂存成功")
                                this.open = false;
                                this.fetchData();
                            } else {
                                this.$message.success("暂存失败")
                            }
                        })
                    }

                    console.log("requestParams", requestParams);
                    console.log("saveForm", this.saveForm);
                    // const requestParams = {

                    // }
                }
            })
        },
        save() {

        },
        handleSave(mode) {
            this.open = true;
            this.mode = mode;
            this.$nextTick(() => {
                this.saveForm = {};
            })


        },
        fetchData() {
            studentApi.list({ ...this.queryParams }).then(res => {
                console.log("studentRes", res);
                this.tableData = res.data;
            })
        },
        resetData() {

        }
    }
}
</script>
<style scoped lang="scss">
.bottom-option {
    margin: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>